{% extends "base.html" %}

{% block title %}My Account{% endblock %}

{% block head_css %}
<link href="/static/css/account.css" rel="stylesheet" />
{% endblock %}

{% block head_script %}
<script tyle="text/javascript">
$(document).ready(function() {
    $('#recharge-label').hover(function() {
        $(this).addClass('label-success');
    }, function() {
        $(this).removeClass('label-success');
    });
});
</script>
{% endblock %}

{% block main_content %}
<div class="row">
    <div class="span3">
        <div id="member-info" class="well">
            <ul>
                <li class="info-header">Member Information</li>
                <li class="row-fluid">
                    <span class="field span4">Level</span>
                    <span class="data span4">{{ user.info.level }}</span>
                </li>
                <li class="row-fluid">
                    <span class="field span4">Register</span>
                    <span class="data span4">{{ user.info.register_date|date:"Y-m-d" }}</span>
                </li>
                <li class="row-fluid">
                    <span class="field span4">Expire</span>
                    <span class="data span4"><span class="label {% if user.info.is_active %}label-success{% else %}label-important{% endif %}">{{ user.info.expire_date|date:"Y-m-d" }}</span></span>
                </li>
                <li class="row-fluid">
                    <span class="field span4">Balance</span>
                    <span class="data span4"><span class="label {% if user.info.balance == 0 %}label-warning{% endif %}">{{ user.info.balance }}</span>&nbsp;&nbsp;<a href="/recharge" title="recharge"><span id="recharge-label" class="label"><i class="icon-plus icon-white"></i></span></a></span>
                </li>
                <li class="info-header">Address Information</li>
                <li class="row-fluid">
                    <span class="field span4">Receiver</span>
                    <span class="data span4">{{ user.info.name }}</span>
                </li>
                <li class="row-fluid">
                    <span class="field span4">Country</span>
                    <span class="data span4">{{ user.info.address.country }}</span>
                </li>
                <li class="row-fluid">
                    <span class="field span4">State</span>
                    <span class="data span4">{{ user.info.address.state }}</span>
                </li>
                <li class="row-fluid">
                    <span class="field span4">City</span>
                    <span class="data span4">{{ user.info.address.city }}</span>
                </li>
                <li class="row-fluid">
                    <span class="field span4">Street</span>
                    <span class="data span4">{{ user.info.address.street }}</span>
                </li>
            </ul>
        </div>
    </div>
    <div class="span9">
        <div class="well">
            <h2>Desserts Bought</h2>
            {% if not bought_items %}
                <div class="alert alert-info">
                    <p>You haven't bought anything yet.</p>
                    <strong>
                        <a href="/shop">Browse for desserts now!</a>
                    </strong>
                </div>
            {% else %}
                <div class="row-fluid">
                    {% for item in bought_items %}
                    <div class="span3">
                        <img src="{{ item.pic.url }}" alt="demo" />
                        <p>{{ item.name }}</p>
                    </div>
                    {% endfor %}
                </div>
                    <a href="/shop/cart?dest=purchase" class="btn">View All</a>
            {% endif %}
            <h2>Desserts Reserved</h2>
            {% if not reserved_items %}
                <div class="alert alert-info">
                    <p>You haven't reserved anything yet.</p>
                    <strong>
                        <a href="/shop">Browse for desserts now!</a>
                    </strong>
                </div>
            {% else %}
                <div class="row-fluid">
                    {% for item in reserved_items %}
                    <div class="span3">
                        <img src="{{ item.pic.url }}" alt="demo" />
                        <p>{{ item.name }}</p>
                    </div>
                    {% endfor %}
                </div>
                    <a href="/shop/cart?dest=reservation" class="btn">View All</a>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}
